现在二维码很普遍，很多时候都需要把链接或者文字生成一个二维码，所以自己周末就制作了一个二维码在线生成工具，支持大小和颜色的修改，基本能满足平时需要，喜欢的可以收藏使用。

　　工具地址：

　　github地址：

　　工具截图：

　　

　　工具源码：

　　1、调用开放的api（liantu），支持大小、前景色、背景色、嵌入logo等等属性，这里只加入了两个常用的两种，其实想把嵌入logo也加入的，但是要写图片上传功能，就暂时先搁置。

　　核心代码：

　　

createEwm : function(){        var _this = this,            val = _this.text_con.value;            if(val == ''){                alert('请输入文字内容，支持普通文本和网址！')                return;            };            var fgcolor = document.getElementById('fgcolor').value,                bgcolor = document.getElementById('bgcolor').value;                            _this.showEwm(_this.text_con.value,_this.getRadioValue(_this.ewm_size),fgcolor,bgcolor);    },    showEwm : function(url,w,fg,bg){        var _this = this;            // _this.logo_url = logo ? logo : '';        var api = 'http://qr.liantu.com/api.php?w='+ w +'&bg=fcfcfc&text='+ url +'&bg='+ bg + '&fg='+ fg,            img_html = '';            _this.show_ele.innerHTML = img_html;    },

　　2、设置大小，这里只放出了三种尺寸选择，当然也可以做成滑动改变任意尺寸：

　　核心代码：

getRadioValue : function(obj){        if(obj != null){            var i;            for(i=0;i

　　3、颜色的改变，这个是最复杂的了，需要通过js模拟样色面板（基于jq）

　　核心代码：

function iColorShow(e, t) {    _id = e;    var n = jQuery("#" + t).offset();    jQuery("#iColorPicker,#icp_iframe").css({top: n.top + jQuery("#" + e).outerHeight() +  "px",left: n.left - 100 + "px",position: "absolute"}).fadeIn("fast");    if (!-[1] && !window.XMLHttpRequest) {        jQuery("body,html").css({height: "100%",width: "100%",position: "relative"});        jQuery("#iColorPickerBg").css({position: "absolute",top: 0,left: 0,width: "100%",height: "100%"}).fadeIn("fast")    } else {        jQuery("#iColorPickerBg").css({position: "fixed",top: 0,left: 0,width: "100%",height: "100%"}).fadeIn("fast")    }    var r = jQuery("#" + e).val();    jQuery("#colorPreview").css("background", r);    jQuery("#color").val(r);    var s = jQuery("#iColorPicker");    tempColor = null;    jQuery("#colorPreview input").val(r);    for (i = 0; i < s.length; i++) {        var o = document.getElementById("hexSection" + i);        var u = o.childNodes;        var a = u.length;        for (j = 0; j < a; j++) {            var f = u[j].childNodes;            var l = f.length;            for (k = 0; k < l; k++) {                jQuery(u[j].childNodes[k]).click(function() {                    var hx = jQuery(this).attr("hx"),                        t = "#" + hx;                    tempColor = t;                    jQuery("#icp_" + _id).css("background-color", t);                    jQuery("#" + _id).val(hx).css("background-color", t);                    jQuery("#iColorPickerBg").hide();                    jQuery("#iColorPicker,#icp_iframe").fadeOut();                    // canvasSet(canvasObj, e, t);                    ewm.createEwm();                    jQuery(this)                })            }        }    }    jQuery("#colorPreview input").keyup(function() {        var e = $(this).val();        if (e.match(/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/)) {            jQuery("#colorPreview").css("background", e);            jQuery("#icp_" + _id).val(e).css("background-color", e);            // canvasChange(canvasObj, _id, e);            jQuery("#" + _id).val(e).css("background", e);            // canvasSet(canvasObj, _id, e)        }    }).keydown(function(e) {        return !String.fromCharCode(e.which).match(/[^#0-9A-F\b\x25\x27\x60a-k]/)    })}var tempColor = null;var _id = null;this.iColorPicker = function() {    jQuery("input.iColorPicker").each(function(e) {        if (e == 0) {            jQuery(document.createElement("div")).attr("id", "iColorPicker").css("display", "none").html('
     
').appendTo("body");            jQuery(document.createElement("div")).attr("id", "iColorPickerBg").click(function() {                jQuery("#iColorPickerBg").hide();                if (!-[1]) {                    setColor(_id)                }                jQuery("#" + _id).parent().siblings(".close").show();                jQuery("#" + _id).attr("data-color", tempColor);                jQuery("#iColorPicker,#icp_iframe").fadeOut()            }).appendTo("body");            jQuery("table.pickerTable td").css({width: "12px",height: "14px",border: "1px solid #000",cursor: "pointer"});            jQuery("#iColorPicker table.pickerTable").css({"border-collapse": "collapse"});            jQuery("#iColorPicker").css({border: "1px solid #ccc",background: "#333",padding: "5px",color: "#fff","z-index": 9999}).before('')        }        jQuery("#colorPreview").css({height: "50px"});        jQuery(this).css("backgroundColor", '#'+jQuery(this).val()).after('
     
")    })};

　　原理是通过预先定义好的一块颜色面板，当鼠标点击后，把该颜色放到一个隐藏的输入框，生成的时候获取颜色值。不考虑低级浏览器，可以用html5来简单实现。